<template>
  <div class="uservacation">
    <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>员工年假统计</span>
            </div>
      <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
            <el-select size="small"  @change="areaselected(formInline.area_name)" v-model="formInline.area_name" placeholder="按区域筛选">
            <el-option 
            v-for="(item,index) in areacho"
            :key="item+index"
            :value="item.area"
            >{{item.area}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
            <el-select size="small"  @change="departmentselected(formInline.project_name)" v-model="formInline.project_name" placeholder="按项目筛选">
            <el-option 
            v-for="(item,index) in selection"
            :key="item+index"
            :value="item"
            >{{item}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="choose">筛选</el-button>
            <el-button type="primary" size="small" @click="ammm">全部</el-button>
            <el-button type="warning" icon="el-icon-folder-opened" size="small" @click="exportExcel">导出当前页</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="area" label="区域" header-align="center" align="center"></el-table-column>
      <el-table-column prop="project" label="项目" header-align="center" align="center"></el-table-column>
      <el-table-column prop="department" label="职务" header-align="center" align="center"></el-table-column>
      <el-table-column prop="date_on_board" label="入职时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="join_company_date" label="司龄" header-align="center" align="center"></el-table-column>
      <el-table-column prop="sum_year_annual_day" label="年休假总天数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="use_day" label="已休天数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="remaining_day" label="剩余天数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="detail" label="休假明细" header-align="center" align="center"></el-table-column>
      <el-table-column prop="change_date" label="已调休天数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="change_detail" label="调休明细" header-align="center" align="center"></el-table-column>
      <el-table-column prop="remake" label="备注" header-align="center" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="changecontract(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      layout=" prev, pager, next,jumper"
      :total="totalCount">
    </el-pagination>

    <el-dialog title="年假操作" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="已休天数" prop="use_day">
        <el-input v-model="ruleForm.use_day"></el-input>
      </el-form-item>
      <el-form-item label="休假明细" prop="detail">
        <el-input v-model="ruleForm.detail"></el-input>
      </el-form-item>
      <el-form-item label="已调休天数" prop="change_date">
        <el-input v-model="ruleForm.change_date"></el-input>
      </el-form-item>
      <el-form-item label="调休明细" prop="change_detail">
        <el-input v-model="ruleForm.change_detail"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remake">
        <el-input v-model="ruleForm.remake"></el-input>
      </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Qs from 'qs'
import axios from 'axios'
import {get ,post } from '../../../utils/axios.tool'
export default {
  data() {
    return {
      tableData: [
        {
          id: '',
          name: "",
          area: "",
          project: "",
          department: "",
          date_on_board: "",
          join_company_date: "",
          sum_year_annual_day: '',
          use_day: "",
          remaining_day: "",
          detail: "",
          change_date: "",
          change_detail: "",
          remake: "",
        }
      ],
       formInline: {
          area_name: '',
          project_name: '',
          filter_parameter: "",
      },
      pagesize:10,
      currentPage:1,
      totalCount:1,
      areacho:[],
    dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        use_day: '',
        detail: "",
        change_date: "",
        change_detail: "",
        remake: ""
      },
    }
  },
  methods: {
    changecontract(row){
      this.dialogFormVisible = true;
      this.ruleForm = row;
      this.usersid = Number(row.id);
    },
    submitForm(formName) {
      let id = this.usersid;
      let url = `/usermanage/annual_vacations/${id}/`
      Qs.stringify(this.ruleForm)
      let sessionId = localStorage.getItem("sessionId");
      let Authorization =  `JWT ${sessionId}`;
      axios.put(url,Qs.parse(this.ruleForm),{headers:{
          'Authorization':Authorization
        }
      }).then(res=>{
        this.dialogFormVisible = false;
        this.$message("修改成功");
        this.getData()
      })    
    },
    handleCurrentChange(val){
      this.currentPage = val
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/annual_vacations/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.data;
        this.totalCount = res.count
      });
    },
    getData(){
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/annual_vacations/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url).then(res => {
        this.tableData = res.data;
        this.totalCount = res.count
      });
    },
    areaselected(val){
      this.formInline.area_name = val
      this.formInline.project_name = ''
    },
    departmentselected(val){
      this.formInline.project_name = val
    },
    ammm(){
      this.formInline.area_name = ''
      this.formInline.project_name = ''
      this.getData()
    },
    choose(){
      let page_size = this.pagesize
      this.currentPage = 1
      let page = this.currentPage
      let url = `/usermanage/annual_vacations/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.data;
        this.totalCount = res.count
      });
    },
    areachoose(){
      let url='/usermanage/area/'
      this.$axios.get(url).then(res=>{
        this.areacho = res.data
      })
    },
    exportExcel() {　//兼容ie10哦！
      　　require.ensure([], () => {　　　　　　　　
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');　　//引入文件　　　　　　
          const tHeader = ['序号', '姓名', '区域', '项目', '职务', '入职时间','司龄','年休假总天数','已休天数','剩余天数','休假明细','已调休天数','调休明细','备注']
          const filterVal = ['id', 'name','area','project','department','date_on_board','join_company_date','sum_year_annual_day','use_day','remaining_day','detail','change_date','change_detail','remake'];//table表格中对应的属性名　　　　　 　　　
          const list = this.tableData;　　//想要导出的数据　　　　　　
          const data = this.formatJson(filterVal, list);　　　　　　　　
          export_json_to_excel(tHeader, data, '员工通讯录');
          })
      },
      formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]));
      },
  },
  mounted(){
    this.getData()
    this.areachoose()
  },
  computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area_name){
                    return this.areacho[i].project;
                }
            }
        },
   }
}

</script>

<style lang="less">
.uservacation {
  .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
  .el-input--mini .el-input__inner {
    width: 40%;
    margin-bottom: 22px;
  }
  .el-input--mini{
    display: inline;
    margin-right: 80px;
  }
  .el-pagination{
    display: flex;
    justify-content: center;
  }
  .el-button--small, .el-button--small.is-round{
    margin-right: 30px;
  }
}
</style>